<template>
  <div class="row product-item">  
    <div class="col-sm-3 product-item-img-area">
      
      <!-- 如果使用img-thumbnail后，img将无法通过margin: 5px auto;来水平居中 -->
      <img :src="$props.product.imgUrl" class="product-item-img img-responsive">
    </div>
    <div class="col-sm-8 product-item-desc">
      <div><strong>{{ $props.product.name }}</strong><span>(库存：{{ $props.product.inventory }}件)</span></div>
      <div>{{ $props.product.desc }}</div>
      <!-- &yen;为人民币符号 -->
      <!-- <div><strong class="price">&yen;{{ $props.product.price | formatPrice }}</strong></div> -->
      <div><strong class="price">{{ $props.product.price | formatPrice }}</strong></div>
    </div>      
    <!-- 操作按钮panel，也可以通过position:absolute将panel定位于product-item的右上解,
         但是absolute定位下hover会失效
         因而此处用了单独一列，而不是absolute定位 -->
    <div class="col-sm-1 product-item-operate">
        <img src="../assets/Shopping_Cart_Add_24px.png" class="product-item-operate-add" @click="addCart($props.product)">
    </div>
  </div>
</template>

<script>

import { mapActions } from 'vuex'
import icons from '../resx/Icons.js'

export default {
  props: {
    product: {
      type: Object,
      default: function () {
        return {
          name: 'Philipes剃须刀',
          inventory: 200,
          desc: '旗舰店/只换不修/质保3年 旗舰店/只换不修/质保3年 旗舰店/只换不修/质保3年 旗舰店/只换不修/质保3年',
          price: 266,
          imgUrl: icons.logo
        }
      }
    }
  },
  methods: mapActions([
    'addCart'
  ])
}
</script>

<style scoped>
.product-item {
  position: relative;
  border: 1px solid #ddd;
  padding: 10px;
  margin: 10px 0;
}

.product-item:hover {
  background-color: #eee;
}


.product-item:hover .product-item-img-area {
  background-color: #fff;
}

.product-item-operate {
  visibility: hidden;

  /* brower缩小到一定宽度时，最后一列会自动换至下一行。重置padding\margin为0，将最大程度的避免这种情况 */
  padding: 0;
  margin: 0;
}

.product-item-operate-add {
  float: right;
  height:24px;
  padding: 2px;
  border: 1px solid #eee;
  border-radius: 3px;
}

.product-item-operate-add:hover {
  border: 1px solid #808080;
}

 .product-item:hover .product-item-operate{
  visibility: visible;
} 

.product-item-desc {
  padding-right: 0;
  margin-right: 0;
}
.product-item-img {
  margin: 5px auto;
}


.product-item-img-area {
  border: 1px solid #ddd;
  border-radius: 4px;
}
</style>